<template>
  <div>
    <div class="page-index">
      <div class="page-left">
        <ClassifyTreeSilder @nodeClick="nodeClick" ref="treeSilder" />
      </div>
      <div class="page-right">
        <div class="table-search">
          <el-form inline>
            <el-form-item label="所属组织">
              <ClassifyTreeSelect
                @input="getBranchId"
                @getValue="getBranchNode"
                :value="queryParams.partyOrgId"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="queryParams.name" size="mini" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="缴费状态">
              <el-select v-model="queryParams.chargeStatus" size="mini" placeholder="请选择" >
                <el-option
                  v-for="(item,index) in statusList"
                  :key="index"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="search">搜索</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-form inline>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                @click="openChange"
                :disabled="multipleSelection.length===0"
              >批量修改缴费状态</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            ref="table"
            height="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="50"/>
            <el-table-column prop="name" label="党员姓名" align="center" width="150" />
            <el-table-column prop="partyOrgName" label="所属支部" align="center" min-width="150" />
            <el-table-column prop="year" label="年份" align="center" width="120" />
            <el-table-column prop="startMonth" label="开始月份" align="center" width="80" />
            <el-table-column prop="endMonth" label="结束月份" align="center" width="80" />
            <el-table-column prop="monthlyPartyDues" label="每月党费" align="center" width="150" />
            <el-table-column prop="partyDuesDue" label="党费合计" align="center" width="150" />
            <el-table-column prop="chargeStatus" label="收费状态" align="center" width="180">
              <template slot-scope="scope">
                {{ statusList[scope.row.chargeStatus] }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openChange(scope.row)"
                >修改状态</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="send(scope.row)"
                >提醒</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
  </div>
</template>
<script>
import ClassifyTreeSilder from '@/components/classifyTree/classifyTreeSilder.vue'
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { queryByCondition } from '@/api/cadreBusiness/feeInfoManagement'
export default {
  components: {
    ClassifyTreeSilder,
    ClassifyTreeSelect
  },
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        partyOrgId: '',
        name: ''
      },
      total: 0,
      tableData: [
        { id: 1 }
      ],
      multipleSelection: [],
      statusList: ['未缴费', '已收费']
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      queryByCondition(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    nodeClick (data, node, dom) {
      this.queryParams.partyOrgId = data?.id || null
      this.search()
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    openChange (row) {
      this.clearCheck()
    },
    send (row) {},
    reset () {
      this.queryParams.partyOrgId = ''
      this.queryParams.name = ''
      this.search()
    },
    getBranchNode (node) {
      this.queryParams.partyOrgId = node?.id || null
      // this.queryParams.partyOrgName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    clearCheck () {
      this.$refs.table.clearSelection()
      this.multipleSelection = []
    }
  }
}
</script>
<style scoped lang="scss">
.page-index {
  display: flex;
  padding-top: 24px;
  .page-left {
    height: calc(100vh - 130px);
    overflow-y: auto;
    width: 300px;
  }
  .page-right {
    flex: 1;
    overflow-y: hidden;
    .table-search {
      display: flex;
      justify-content: space-between;
      padding-left:16px;
    }
    .table-box {
      height: calc(100vh - 230px);
    }
  }
}

</style>
